{% extends 'base.html' %}
{% load static from staticfiles %}
{% load mptt_tags %}


<!-- 页面引入css -->
{% block styles %}

    <style>
        body {
            display: block;
            margin: 0px;
            background-color: #f4f7fa;
        }

        .layui-footer .layui
        body {
            display: block;
            margin: 0px;
            background-color: #f4f7fa;
        }

        .layui-layout-admin .layui-footer {
            left: 220px;
        }

        .layui-layout-admin .layui-body {
            left: 220px;
            top: 100px;
        }

        .layui-layout-admin .layui-header {
            height: 50px;
            background-color: #009688;
            box-sizing: border-box;
        }

        .layui-layout-admin .layui-side {
            top: 50px;
        }

        .layui-layout .layui-logo, .layui-layout .layui-logo a {
            color: #fff;
            color: rgba(255, 255, 255, .8);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1002;
            width: 220px;
            height: 49px;
            padding: 0 15px;
            box-sizing: border-box;
            overflow: hidden;
            font-weight: 300;
            background-repeat: no-repeat;
            background-position: center center;
            background-color: #009688 !important;
            line-height: 50px;
            font-size: 16px;
            cursor: pointer;

        }

        .layui-layout-admin .layui-side {
            width: 220px;
        }

        .layui-nav-tree {
            width: 220px;
            padding: 0;
        }

        .layui-header > .layui-layout-left > .layui-nav-item {
            height: 50px;
        }

        .layui-header > .layui-layout-right > .layui-nav-item {
            height: 50px;
        }

        .layui-header > .layui-layout-right {
            height: 50px;
        }

        .layui-header > .layui-layout-left {
            height: 50px;
        }

        .layui-nav-child {
            top: 50px;
        }

        .pagetabs {
            height: 40px;
            line-height: 40px;
            background-color: #fff;
            box-sizing: border-box;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
            position: fixed;
            top: 50px;
            right: 0;
            z-index: 999;
            left: 220px;
        }

        .pagetabs > .layui-tab {
            height: 30px;
            margin: 0;
        }

        -body {
            left: 220px;
        }

        .layui-body {
            left: 220px;
        }

        .layui-layout-admin .layui-header {
            height: 50px;
            background-color: #009688;
            box-sizing: border-box;
        }

        .layui-layout-admin .layui-side {
            top: 50px;
        }

        .layui-layout .layui-logo, .layui-layout .layui-logo a {
            color: #fff;
            color: rgba(255, 255, 255, .8);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1002;
            width: 220px;
            height: 49px;
            padding: 0 15px;
            box-sizing: border-box;
            overflow: hidden;
            font-weight: 300;
            background-repeat: no-repeat;
            background-position: center center;
            background-color: #009688 !important;
            line-height: 50px;
            font-size: 16px;
            cursor: pointer;

        }

        .layui-layout-admin .layui-side {
            width: 220px;
        }

        .layui-nav-tree {
            width: 220px;
            padding: 0;
        }

        .layui-header > .layui-layout-left > .layui-nav-item {
            height: 50px;
        }

        .layui-header > .layui-layout-right > .layui-nav-item {
            height: 50px;
        }

        .layui-header > .layui-layout-right {
            height: 50px;
        }

        .layui-header > .layui-layout-left {
            height: 50px;
        }

        .layui-nav-child {
            top: 50px;
        }

        .pagetabs {
            height: 40px;
            line-height: 40px;
            background-color: #fff;
            box-sizing: border-box;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
            position: fixed;
            top: 50px;
            right: 0;
            z-index: 999;
            left: 220px;
        }

        .pagetabs > .layui-tab {
            height: 30px;
            margin: 0;
        }

        .layui-col-xs3 {
            text-align: center;
        }

        .layui-col-xs3_i {
            font-size: 28px;
        }

        {#tab#}
        .layui-tab-card > .layui-tab-title {
            background-color: #f2f2f2;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
        }
    </style>
{% endblock %}



{% block body %}
    <div class="layui-layout layui-layout-admin">
        {#top#}
        <div class="layui-header">
            <div class="layui-logo">layui 系统管理</div>
            <!-- hearder左边菜单 -->
            <ul class="layui-nav layui-layout-left" lay-filter="t_leftmenu">
                <li class="layui-nav-item layui-this"><a href="">
                    {% for home in homepage %}
                        {{ home.name }}
                    {% endfor %}
                </a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">报表模块</a>
                    <dl class="layui-nav-child"> <!-- 二级菜单 -->
                        {% for topmenu in topmenu %}
                            <dd><a href="">{{ topmenu.name }}</a></dd>
                        {% endfor %}
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">社区</a></li>
            </ul>
            <!-- hearder右边菜单 -->
            <ul class="layui-nav layui-layout-right" lay-filter="t_rightmenu">
                <li class="layui-nav-item">
                    <a href="#">
                        <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                        系统管理员
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="">基本资料</a></dd>
                        <dd><a href="">安全设置</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="{{ path }}/quit">退了</a></li>
            </ul>
        </div>

        {#left#}
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll" style="overflow-y:hidden">
                <ul id="leftmenu" class="layui-nav layui-nav-tree my-tt" lay-filter="leftmenu"> {#my-tt 同调#}
                    {% recursetree leftmenu %}
                        <li class="layui-nav-item {{ node.menu_type }}" id="{{ node.id }}" title="{{ node.name }}"
                            value="{{ node.menu_url }}">
                            <a href="#">{{ node.name }}</a>
                            {% if not node.is_leaf_node %}
                                <ul class="children layui-nav-child">
                                    {{ children }}
                                </ul>
                            {% endif %}
                        </li>
                    {% endrecursetree %}
                </ul>
            </div>
        </div>

        {#center#}
        <div class="pagetabs" id="tabs">
            <div class="layui-tab layui-tab-card " lay-allowClose="true" lay-filter="tabs">
                <ul class="layui-tab-title">
                    <li class="layui-this">首页</li>
                </ul>

                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">

                        <div class="layui-row ">
                            <div class="layui-col-md4">
                                <div class="layui-card">
                                    <div class="layui-card-header">历史窗口</div>
                                    <div class="layui-card-body">
                                        {#历史浏览#}
                                        <div carousel-item="">
                                            <ul id="select_browse_record"
                                                class="layui-row layui-col-space10 layui-this "
                                                lay-filter="record">
                                            </ul>
                                        </div>


                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>

            </div>
        </div>


        {#foot#}
        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © Hroot 框架
        </div>


    </div>



{% endblock %}

{% block scripts %}


    <script>
        window.onload = function () {
            //更新浏览记录
            $.ajax({
                type: "GET",
                url: "{{ path }}/select_browse_record",
                data: {menu_id: $(this).parent('').attr('id')},
                dataType: "json",
                success: function (data) {
                    var select_browse_record_list = ""
                    for (i in data.menu) {
                        select_browse_record_list += "<li class=\"layui-col-xs3\" id=\"" + data.menu[i].id + "\" title=\"" + data.menu[i].name + "\" value=\"" + data.menu[i].menu_url + "\">\n" +
                            "<a lay-href=\"home/homepage1.html\">\n" +
                            " <i class=\"" + data.menu[i].menu_icon + " layui-icon  layui-col-xs3_i\"></i>\n" +
                            "<p>" + data.menu[i].name + "</p>\n" +
                            "</a>\n" +
                            "</li>"
                    }

                    $('#select_browse_record').html(
                        select_browse_record_list
                    )

                }
            });
        }
        layui.use('element', function () {
            //element模块的实例
            //返回的element变量为该实例的对象，携带一些用于元素操作的基础方法
            var element = layui.element;
            var $ = layui.jquery, layer = layui.layer;
            //清除左树子集的class（django mptt children 特性）
            $(".layui-nav-item .layui-nav-item").removeClass("layui-nav-item");
            //更新全部  2.1.6 可用 element.render() 方法替代
            element.init();

            //历史记录点击事件
            $("#select_browse_record").on('click', "li", function () {
                thisid = $(this).attr('id')
                var addtabname = $('.my-tt #' + thisid + '').attr('title') //得到同调点击的左树title
                var addtabval = $('.my-tt #' + thisid + '').attr('value') //得到同调点击的左树value
                var addtabclass = $('.my-tt #' + thisid + '').attr('class')
                var havetab = false //定义当前没有这个tab
                var tabsValues = $('.layui-tab-title li').length //tab数量
                var havetabval = '' //定义当前tab内容为空（再获取）
                //循环看是否有这个tab
                for (var i = 1; i < tabsValues; i++) {
                    //获取全部tab属性为value的值
                    var tabcontexts = $('.layui-tab-title li:eq(' + [i] + ')').text().replace('ဆ', '')
                    //如果tab有左边菜单传入value内容
                    if (addtabname == tabcontexts) {
                        havetabval = tabcontexts
                        havetab = true
                    }
                }
                //如果没有添加并且树类型是叶子
                if (havetab == false && addtabclass.match('leaf')) {
                    element.tabAdd('tabs', {
                        class: 'layui-this',
                        title: '<span title="' + addtabval + '">' + addtabname + '</span>' //title==url地址
                        ,
                        content: '<iframe class=\'layui-col-xs12\'   frameborder="no"  allowtransparency="yes" height="550"  border="0px" scrolling="no"  src="' + addtabval + '"></iframe>  '
                        ,
                        id: addtabname
                    });
                    element.tabChange('tabs', addtabname); //当前的tab焦点
                } else {
                    element.tabChange('tabs', addtabname); //当前的tab焦点
                }
            })

            //监听左树点击
            element.on('nav(leftmenu)', function addtabandpage(data) {
                var addtabname = $(this).parent('').attr('title') //得到当前点击的li name
                var addtabval = $(this).parent('').attr('value') //得到当前点击的li对象
                var addtabclass = $(this).parent('').attr('class') //得到当前点击的li class属性
                var havetab = false //定义当前没有这个tab
                var tabsValues = $('.layui-tab-title li').length //tab数量
                var havetabval = '' //定义当前tab内容为空（再获取）
                //循环看是否有这个tab
                for (var i = 1; i < tabsValues; i++) {
                    //获取全部tab属性为value的值
                    var tabcontexts = $('.layui-tab-title li:eq(' + [i] + ')').text().replace('ဆ', '')
                    //如果tab有左边菜单传入value内容
                    if (addtabname == tabcontexts) {
                        havetabval = tabcontexts
                        havetab = true
                    }
                }


                //如果没有添加并且树类型是叶子
                if (havetab == false && addtabclass.match('leaf')) {
                    element.tabAdd('tabs', {
                        class: 'layui-this',
                        title: '<span title="' + addtabval + '">' + addtabname + '</span>' //title==url地址
                        ,
                        content: '<iframe class=\'layui-col-xs12\'   frameborder="no"  allowtransparency="yes" height="550"  border="0px" scrolling="no"  src="' + addtabval + '"></iframe>  '
                        ,
                        id: addtabname
                    });
                    element.tabChange('tabs', addtabname); //当前的tab焦点
                    //传入浏览记录
                    $.ajax({
                        type: "GET",
                        url: "{{ path }}/add_browse_record",
                        data: {id: $(this).parent('').attr('id')},
                        dataType: "json",
                        success: function (data) {
                            console.log("历史记录：" + data.info)
                        }
                    });
                    //更新浏览记录
                    $.ajax({
                        type: "GET",
                        url: "{{ path }}/select_browse_record",
                        data: {menu_id: $(this).parent('').attr('id')},
                        dataType: "json",
                        success: function (data) {
                            var select_browse_record_list = ""
                            for (i in data.menu) {
                                select_browse_record_list += "<li class=\"layui-col-xs3\" id=\"" + data.menu[i].id + "\" title=\"" + data.menu[i].name + "\" value=\"" + data.menu[i].menu_url + "\">\n" +
                                    "<a lay-href=\"home/homepage1.html\">\n" +
                                    " <i class=\"" + data.menu[i].menu_icon + " layui-icon  layui-col-xs3_i\"></i>\n" +
                                    "<p>" + data.menu[i].name + "</p>\n" +
                                    "</a>\n" +
                                    "</li>"
                            }

                            $('#select_browse_record').html(
                                select_browse_record_list
                            )

                        }
                    });

                } else {
                    element.tabChange('tabs', addtabname); //当前的tab焦点
                }
            });


            //监听tab点击
            element.on('tab(tabs)', function (data) {
                var has = '{{ path }}/' + $(this).children('').attr('title'); //hash地址
                element.tabChange('tabs', has); //重新渲染
            });
        });


    </script>

{% endblock %}